<template>
  <div class="GykjMap-ruralCrisisRoom">
    <div class="GykjMap-ruralCrisisRoom-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false">
        <TabPane label="基本情况" name="info"></TabPane>
        <TabPane label="非工程措施" name="measures"></TabPane>
      </Tabs>
    </div>
    <div class="GykjMap-ruralCrisisRoom-content">
      <div class="GykjMap-ruralCrisisRoom-table" v-show="activeTab === 'info'">
        <table class="table" border>
          <tbody>
            <tr>
              <td class="key">类型</td>
              <td>{{fliterData('类型')}}</td>
              <td class="key">产权责任人</td>
              <td>{{fliterData('产权责任人')}}</td>
            </tr>
            <tr>
              <td class="key">地址</td>
              <td colspan="3">{{fliterData('地址')}}</td>
            </tr>
            <tr>
              <td class="key">联系人姓名</td>
              <td>{{fliterData('联系人姓名')}}</td>
              <td class="key">联系人电话</td>
              <td>{{fliterData('联系人电话')}}</td>
            </tr>
            <tr>
              <td class="key">结构层次（层）</td>
              <td>{{fliterData('结构层次（层）')}}</td>
              <td class="key">建筑面积</td>
              <td>{{fliterData('建筑面积')}}</td>
            </tr>
            <tr>
              <td class="key">建筑年份</td>
              <td>{{fliterData('建筑年份')}}</td>
              <td class="key">使用年限</td>
              <td>{{fliterData('使用年限')}}</td>
            </tr>
            <tr>
              <td class="key">结构型式</td>
              <td>{{fliterData('结构型式')}}</td>
              <td class="key">房屋性质</td>
              <td>{{fliterData('房屋性质')}}</td>
            </tr>
            <tr>
              <td class="key">主管部门</td>
              <td>{{fliterData('主管部门')}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="GykjMap-ruralCrisisRoom-table" v-show="activeTab === 'measures'">

        <div>
          <base-title title="转移负责人" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="center" colspan="2">镇（街）</td>
                <td class="center" colspan="2">村（居）委会</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="key">电话</td>
                <td class="key">姓名</td>
                <td class="key">电话</td>
              </tr>
              <tr>
                <td class="center">{{fliterDouData('预警责任人_镇（街）.姓名')}}</td>
                <td class="center">{{fliterDouData('预警责任人_镇（街）.电话')}}</td>
                <td class="center">{{fliterDouData('预警责任人_村（居）委会.姓名')}}</td>
                <td class="center">{{fliterDouData('预警责任人_村（居）委会.电话')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div style="margin: 10px 0;">
          <base-title title="转移负责人" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="center" colspan="2">镇（街）</td>
                <td class="center" colspan="2">村（居）委会</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="key">电话</td>
                <td class="key">姓名</td>
                <td class="key">电话</td>
              </tr>
              <tr>
                <td class="center">{{fliterDouData('转移负责人_镇（街）.姓名')}}</td>
                <td class="center">{{fliterDouData('转移负责人_镇（街）.电话')}}</td>
                <td class="center">{{fliterDouData('转移负责人_村（居）委会.姓名')}}</td>
                <td class="center">{{fliterDouData('转移负责人_村（居）委会.电话')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div>
          <base-title title="安置负责人" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key">安置点名称</td>
                <td class="center" colspan="3">{{fliterData('安置负责人.安置点名称')}}</td>
              </tr>
              <tr>
                <td class="key">安置点地址</td>
                <td class="center" colspan="3">{{fliterData('安置负责人.安置点地址')}}</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="center">单位</td>
                <td class="center">职务</td>
                <td class="center">电话</td>
              </tr>
              <tr>
                <td class="key">{{fliterDouData('安置负责人.姓名')}}</td>
                <td class="center">{{fliterDouData('安置负责人.单位')}}</td>
                <td class="center">{{fliterDouData('安置负责人.职务')}}</td>
                <td class="center">{{fliterDouData('安置负责人.电话')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import BaseTitle from '../../public/base-title/base-title'

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseTitle
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info'
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
      this.activeTab = 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-ruralCrisisRoom {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-ruralCrisisRoom-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-ruralCrisisRoom-content {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
    bottom: 5px;
    .GykjMap-ruralCrisisRoom-table {
      width: 100%;
      height: 100%;
      .table {
        width: 100%;
        margin: auto;
        font-size: 14px;
        border: 1px solid #ddd;
        margin: 5px 0;
        td {
          padding: 5px;
          &.key {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
